<template>
  <div class="container">
    <docFeeBookingMessage
      :detailData="detailData"
      :singleTicket="state.singleTicket"
    ></docFeeBookingMessage>
    <div class="middle-box">
      <span class="label"> 应收 </span>
    </div>
    <!-- 应收 -->
    <docDetailFeeInOrExpandNew
      :tableData="detailData.feeIncometable"
      :isIncome="true"
      :showBtn="showBtn"
      ref="docDetailFeeInRef"
      @conversion="conversion"
      :feeSum="state.feeInSum"
    ></docDetailFeeInOrExpandNew>

    <!-- 应付 -->
    <div class="middle-box" style="margin-top: 16px">
      <span class="label"> 应付 </span>
    </div>
    <docDetailFeeInOrExpandNew
      :tableData="detailData.feeExpandtable"
      :isIncome="false"
      :showBtn="showBtn"
      ref="docDetailFeeExRef"
      @conversion="conversion"
      :feeSum="state.feeOutSum"
    ></docDetailFeeInOrExpandNew>
  </div>
</template>

<script setup>
import { computed, defineComponent, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/public/request'
import docDetailFeeInOrExpandNew from './docDetailFeeInOrExpandNew.vue'
import docFeeBookingMessage from './docFeeBookingMessage.vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore, Store } from 'vuex'

const Router = useRouter()
const Route = useRoute()
const store = useStore()
const emits = defineEmits(['refreshStep'])

const props = defineProps({
  //详细数据
  detailData: {
    type: Object,
    default: () => {}
  },
  //控制编辑和查看
  showBtn: {
    type: Boolean,
    default: false
  }
})
const docDetailFeeInRef = ref(null)
const docDetailFeeExRef = ref(null)

const state = reactive({
  feeInSum: [], //各币种对应金额
  feeOutSum: [], //各币种对应金额
  singleTicket: {
    notaxMoneyIn: 0, //不含税金额
    taxAmountIn: 0, //税额
    amountIsTaxIn: 0, //含税金额
    notaxMoneyOut: 0, //不含税金额
    taxAmountOut: 0, //税额
    amountIsTaxOut: 0, //含税金额
    notaxMoneyProfit: 0, //利润
    profitPrecent: 0 //利润率
  }
})

// 收入和支出转换
function conversion(isInome, tableSelect) {
  for (const iterator of tableSelect) {
    iterator.id = 0
    if (isInome) {
      props.detailData.feeExpandtable.push(iterator)
    } else {
      props.detailData.feeIncometable.push(iterator)
    }
  }
}

// 计算含税
function calculateTax(dataArray) {
  let currencyType = {}
  for (const iterator of dataArray) {
    let currentKeysList = Object.keys(currencyType)
    if (iterator.currency) {
      if (currentKeysList.indexOf(iterator.currency) == -1) {
        currencyType[iterator.currency] = iterator.taxAmount
          ? parseFloat(iterator.taxAmount)
          : 0
      } else {
        currencyType[iterator.currency] += iterator.taxAmount
          ? parseFloat(iterator.taxAmount)
          : 0
      }
    }
  }
  return currencyType
}

// 汇总当前应收应付的金额汇总应收
function calculateAmount(dataArray) {
  let currencyType = calculateTax(dataArray)
  let currentKeysListSum = Object.keys(currencyType)
  for (const item of currentKeysListSum) {
    state.feeInSum.push({
      type: item,
      money: currencyType[item]
    })
  }
}
// 汇总当前应收应付的金额汇总应付
function calculateAmountEx(dataArray) {
  let currencyType = calculateTax(dataArray)
  let currentKeysListSum = Object.keys(currencyType)
  for (const item of currentKeysListSum) {
    state.feeOutSum.push({
      type: item,
      money: currencyType[item]
    })
  }
}

// 计算应收和应付的所有金额
function calculateSumAll(inArray, outArray) {
  state.singleTicket = {
    notaxMoneyIn: 0, //不含税金额
    taxAmountIn: 0, //税额
    amountIsTaxIn: 0, //含税金额
    notaxMoneyOut: 0, //不含税金额
    taxAmountOut: 0, //税额
    amountIsTaxOut: 0, //含税金额
    notaxMoneyProfit: 0, //利润
    profitPrecent: 0 //利润率
  }
  for (const item of inArray) {
    state.singleTicket.notaxMoneyIn += item.feeAmountRmb
      ? parseFloat(item.feeAmountRmb)
      : 0
    state.singleTicket.taxAmountIn += item.taxAmount
      ? parseFloat(item.taxAmount)
      : 0
    state.singleTicket.amountIsTaxIn += item.amountIsTax
      ? parseFloat(item.amountIsTax)
      : 0
  }
  for (const item of outArray) {
    state.singleTicket.notaxMoneyOut += item.feeAmountRmb
      ? parseFloat(item.feeAmountRmb)
      : 0
    state.singleTicket.taxAmountOut += item.taxAmount
      ? parseFloat(item.taxAmount)
      : 0
    state.singleTicket.amountIsTaxOut += item.amountIsTax
      ? parseFloat(item.amountIsTax)
      : 0
  }
  state.singleTicket.notaxMoneyProfit =
    state.singleTicket.notaxMoneyIn - state.singleTicket.notaxMoneyOut
  if (state.singleTicket.amountIsTaxIn) {
    if (
      state.singleTicket.profitPrecent - state.singleTicket.amountIsTaxIn <
        1e-5 &&
      state.singleTicket.profitPrecent - state.singleTicket.amountIsTaxIn > 0
    ) {
      state.singleTicket.profitPrecent = 0
    } else {
      state.singleTicket.profitPrecent =
        (state.singleTicket.notaxMoneyProfit
          ? state.singleTicket.notaxMoneyProfit /
            state.singleTicket.amountIsTaxIn
          : 0) * 100

      state.singleTicket.profitPrecent =
        state.singleTicket.profitPrecent.toFixed(2)
    }
  } else {
    state.singleTicket.profitPrecent = state.singleTicket.notaxMoneyProfit
      ? state.singleTicket.notaxMoneyProfit / 1
      : 0
  }
}

watch(
  () => [props.detailData.feeIncometable, props.detailData.feeExpandtable],
  (newValue) => {
    state.feeInSum = []
    state.feeOutSum = []
    calculateAmount(newValue[0])
    calculateAmountEx(newValue[1])
    calculateSumAll(newValue[0], newValue[1])
  },
  {
    immediate: true,
    deep: true
  }
)

defineExpose({
  docDetailFeeInRef,
  docDetailFeeExRef
})
</script>

<style lang="scss" scoped>
@import '@/styles/business/business.scss';
.container {
  :deep(.el-form-item) {
    margin: 0;

    .el-form-item__label {
      font-size: 12px;
    }
  }

  :deep(.el-row) {
    margin-bottom: 8px;
    // padding-right: 16px;
  }

  .info {
    padding: 0 16px 8px;
    span {
      margin-right: 32px;
      color: #00000099;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      text-align: left;
    }
    .info-bold {
      color: #000000d8;
    }
  }

  .boxSize {
    padding: 0 20px;
    display: flex;
    margin-bottom: 16px;

    .boxSize-box {
      width: 14%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 32px;

      :deep(.el-input-number) {
        .el-input-number__decrease {
          display: none;
        }

        .el-input-number__increase {
          display: none;
        }

        .el-input__inner {
          padding: 0;
        }
      }

      .box-input {
        flex: 1;
      }

      .middle-icon {
        margin: 0 8px;
      }

      .box-select {
        flex: 1;
      }
    }
  }

  .table-box {
    padding: 0 12px 10px;
  }
}

.check-box-container {
  :deep(.el-checkbox) {
    margin-left: 12px;
    margin-right: 0px;
  }
}

:deep(.el-table .cell) {
  color: #000000d8;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0px;
}
</style>
